<template>
  <div class="index">
    <!-- 头部搜索框 -->
    <van-row class="header">
      <div id="allmaps"></div>
      <van-col span="4" class="map" @click="mapJump">{{ city }}</van-col>
      <van-col span="20"
        ><van-search
          @click="searchJump"
          class="searchGoods"
          placeholder="搜索商品"
      /></van-col>
    </van-row>
    <!-- 轮播 -->
    <van-swipe autoplay="3000" indicator-color="#000" class="index-bo">
      <van-swipe-item v-for="item in list.banner" :key="item.id">
        <img v-lazy="item.image_url" />
      </van-swipe-item>
    </van-swipe>
    <!-- tabbar导航 -->
    <van-grid clickable :column-num="5" :border="false">
      <van-grid-item
        v-for="item in list.channel"
        :key="item.id"
        :icon="item.icon_url"
        :text="item.name"
        @click="jumpCatelist(item.id)"
      />
    </van-grid>
    <!-- 品牌制造商 -->
    <van-row class="brand">
      <p class="title">品牌制造商直供</p>
      <van-grid :border="false" :column-num="2" gutter="4">
        <van-grid-item v-for="item in list.brandList" :key="item.id" @click="brandId(item.id)">
          <div class="grid-text">
            <p>{{ item.name }}</p>
            <p>{{ item.floor_price }}元起</p>
          </div>
          <van-image :src="item.new_pic_url" />
        </van-grid-item>
      </van-grid>
    </van-row>
    <!-- 新品首发 -->
    <van-row class="new" @click="jumpNewGoods">
      <div class="new-text">
        <p class="title">新品首发</p>
        <van-button type="primary" size="mini" class="look"
          >查看全部</van-button
        >
      </div>
    </van-row>
    <!-- 新品首发轮播  未完成不知道用哪一个插件!!!-->
    <van-grid :column-num="4" class="new-grid">
      <van-grid-item v-for="item in list.newGoods" :key="item.id"  @click="jumpGoodsList(item.id)">
        <van-image :src="item.list_pic_url" />
      </van-grid-item>
    </van-grid>
    <!-- 好物推荐 -->
    <van-row class="fine-goods" @click="jumpSiftGoods">
      <div class="goods-text">
        <p class="title">人气推荐.好物精选</p>
        <van-button type="primary" size="mini" class="look"
          >查看全部</van-button
        >
      </div>
    </van-row>
    <!-- 好物推荐轮播  未完成不知道用哪一个插件!!!-->
    <van-grid :column-num="5">
      <van-grid-item v-for="item in list.hotGoods" :key="item.id"  @click="jumpGoodsList(item.id)">
        <van-image :src="item.list_pic_url" />
      </van-grid-item>
    </van-grid>
    <!-- 专题精选轮播  未完成不知道用哪一个插件!!!-->
    <van-grid :column-num="3" class="sift">
      <van-grid-item v-for="item in list.topicList" :key="item.id">
        <van-image :src="item.item_pic_url" />
      </van-grid-item>
    </van-grid>

    <!-- 居家好物 -->
    <div class="fine-list">
      <div
        class="fine-main"
        v-for="item in list.newCategoryList"
        :key="item.id"
      >
        <div class="title">{{ item.name }}好物</div>
        <ul class="fine-list clear">
          <li class="fine-item" v-for="el in item.goodsList" :key="el.id" @click="jumpGoodsList(el.id)">
            <img :src="el.list_pic_url" alt="" />
            <p class="c-name">{{ el.name }}</p>
            <p class="price">¥{{ el.retail_price }}</p>
          </li>
          <li class="fine-item last">
            <p class="list-title">{{ item.name }}好物</p>
            <div class="icon">
              <img src="../../assets/images/rightbig.png" alt="" />
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 底部导航 -->
    <div class="h80"></div>
    <tab-bar></tab-bar>
  </div>
</template>
<script>
import { index,detailaction,goods } from "../../api/home/index";
import tabbar from "../../components/tabbar";
import { mapState,mapMutations } from "vuex";
export default {
  data() {
    return {
      list: [],
      city: "",
      num:0
    };
  },
  components: {
    "tab-bar": tabbar,
  },
  computed: {
     ...mapState(["cityInfo"]),
  },
  methods: {
    ...mapMutations(["getCateId","getBrandId","getIsshow","getgoodsId"]),
    jumpGoodsList(id) {
      this.getgoodsId(id)
      this.$router.push("/goods/main")
    },
    jumpNewGoods() {
      this.num = 1
      this.getIsshow(this.num)
      this.$router.push('/newgoods/main')
    },
    jumpSiftGoods() {
      this.num = 2
      this.getIsshow(this.num)
      this.$router.push('/newgoods/main')
    },
    brandId(id) {
      this.getBrandId(id)
      this.$router.push('/branddetail/main')
    },
    init() {
      index().then((res) => {
        // console.log(999);
        console.log(res);
        this.list = res;
      });
    },
    mapJump() {
      this.$router.push("/pages/mappage/main");
    },
    searchJump() {
      this.$router.push("/pages/search/main");
    },
    jumpCatelist(id) {
      this.getCateId(id)
      this.$router.push('/categorylist/main')
    }
  },
  created() {
    this.init();
  },
  mounted () { // 
//   如果有数据 优先使用vuex中存储的数据 
    if(this.cityInfo.title){
        // console.log("使用vuex中的数据",this.cityInfo.city)
        this.city = this.cityInfo.title;
        // console.log("使用vuex中的数据",this.city)
    }else{
        var _this = this;
        var map = new BMap.Map("allmaps");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
        //添加地图类型控件

        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            // console.log(r)
            _this.city = r.address.city;
            // console.log("使用地图的数据")
        }
        else {
            alert('failed'+this.getStatus());
        }        
        },{enableHighAccuracy: true})
    }
  
  }
};
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
.h80 {
  height: 80px;
}
@mixin over {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
// 品牌制造
.brand {
  background-color: #fff;
  margin-top: 8px;
  padding-bottom: 4px;
  .title {
    padding: 20px 0;
  }
  .van-grid {
    .van-grid-item {
      .van-grid-item__content {
        position: relative;
        padding: 0;
        .grid-text {
          text-align: left;
          position: absolute;
          top: 0;
          left: 0;
          margin: 15px 0 0 4px;
          width: 100%;
          height: 100%;
          z-index: 9;
          p:first-child {
            margin-bottom: 10px;
          }
        }
      }
    }
  }
}
.index-bo {
  .van-swipe__indicator {
    background-color: #333;
  }
}
</style>

<style lang="scss" scoped>
@mixin over {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clear::after {
  display: block;
  content: "";
  clear: both;
}
.index {
  background-color: #f4f4f4;
}

.van-search {
  padding: 0;
}

.header {
  padding: 5px 0;
  background-color: #fff;
  .searchGoods .van-search__content {
    background-color: #fff;
  }
  .map {
    @include over;
    padding-left: 4px;
    line-height: 34px;
  }
}

// swiperBanner

.van-swipe {
  .van-swipe-item {
    img {
      width: 100%;
      height: 200px;
    }
  }
}

// 新品首发
.new {
  background-color: #f1f7fd;
  height: 130px;
  margin: 10px 0;
  .new-text {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
  .title {
    font-size: 15px;
    color: #8c9bae;
    margin: 16px 0;
  }
  .look {
    height: 24px;
    width: 90px;
    background-color: #d8e4f0;
    border: none;
    color: #8c9bae;
  }
}
// 好物推荐
.fine-goods {
  background-color: #fef7e3;
  height: 122px;
  margin: 10px 0;
  .goods-text {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
  .title {
    font-size: 15px;
    color: #b1a279;
    margin: 16px 0;
  }
  .look {
    height: 24px;
    width: 90px;
    background-color: #f4e9cb;
    border: none;
    color: #b1a279;
  }
}
// 专题推荐
.sift {
  margin: 10px 0;
}
// 好物列表
.fine-list {
  .fine-main {
    .title {
      line-height: 40px;
      text-align: center;
    }
    .fine-list {
      .last {
        position: relative;
      }
      .fine-item {
        float: left;
        box-sizing: border-box;
        margin: 0 0 1% 1%;
        width: 49%;
        height: 222px;
        background-color: #fff;
        padding: 10px 20px;
        text-align: left;
        img {
          display: block;
          width: 130px;
          height: 130px;
          margin-bottom: 20px;
        }
        .c-name {
          line-height: 1;
          font-size: 12px;
          margin-bottom: 16px;
        }
        .price {
          font-size: 12px;
          line-height: 1;
          color: #9c3232;
        }
        .list-title {
          text-align: center;
          font-size: 16px;
          color: #333;
          // line-height: 2;
          margin-top: 20px;
        }
        .icon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        .icon img {
          display: block;
          width: 36px;
          height: 37px;
        }
      }
    }
  }
}
</style>
